<template>
	<view class="tasks">
		<view class="box" v-for="(item, index) in tasks" :key="index">
			<view class="taskstit">{{item.name}}</view>
			<view class="taskscnt" v-for="(it, ins) in item.list" :key="it.id">
				<view class="textbox">
					<view class="text1">
						{{it.name}}{{userinfo.user_level_id > 0 ? it.vip_number : it.number}}{{it.reward_type == 1 ? `${names.coin}`
						: '元'}}({{it.finished_limit}}/{{it.limit}})
					</view>
					<view class="text2">
						{{it.sub_title}}{{userinfo.user_level_id > 0 ? it.vip_number : it.number}}{{it.reward_type == 1 ? `${names.coin}`
						: '元'}}
					</view>
				</view>
				<button
					:class="['btn', it.reward_receive_status == 1 ? 'over' : it.reward_receive_status == 2 ? 'go' : 'go']"
					@click="go(it)"
					type="default">{{it.reward_receive_status == 1 ? '已领取' : it.reward_receive_status == 2 ? '领取' : '去参与'}}</button>
			</view>
			<view class="border16"></view>
		</view>
	</view>
</template>

<script>
	import {
		name_config
	} from "@/common/config.js"
	import {
		mapState
	} from 'vuex'
	import {
		getTasks,
		submitTasks
	} from "@/api/act/act.js"
	export default {
		data() {
			return {
				names: name_config,
				tasks: null,
				tasks1: null,
				list: null
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				getTasks().then(res => {
					this.list = res.data
					this.handleData()
				})
			},
			rtext(key) {
				switch (key) {
					case 'daily':
						return "每日任务"
					case 'weekly':
						return "每周任务"
					case 'monthly':
						return "每月任务"
					case "add":
						return "累计任务"
				}
			},
			handleData() {
				let data = {
					daily: [],
					weekly: [],
					monthly: [],
					add: []
				}
				this.list.map(item => {
					switch (+item.status) {
						case 1:
							data.daily.push(item);
							break
						case 2:
							data.weekly.push(item)
							break
						case 3:
							data.monthly.push(item)
							break
						case 4:
							data.add.push(item)
					}
				})

				let arr = []
				for (let key in data) {
					let item = data[key]
					if (item.length > 0) {
						arr.push({
							name: this.rtext(key),
							list: item
						})
					}
				}
				this.tasks = arr
			},
			go(obj) {
				let status = obj.reward_receive_status
				if (+status === 0) {
					let type = obj.type
					if (+type === 5) { //  vip  跳转不同
						uni.navigateTo({
							url: "/pages/index/home/banner-detail?type=2"
						})
					} else {
						uni.switchTab({
							url: '/pages/index/home/index'
						});
					}
				} else if (+status === 2) {
					submitTasks({
						id: obj.id
					}).then(res => {
						if (res && res.code == 200) {
							uni.showToast({
								icon: 'none',
								duration: 3000,
								title: "领取成功！"
							});
							this.getData()
						} else {
							uni.showToast({
								icon: 'none',
								duration: 3000,
								title: "网络错误，请稍后重试～"
							});
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style scoped>
	.tasks {
		padding-bottom: 30rpx;
	}

	.box {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.taskstit {
		margin: 34rpx auto 22rpx;
		font-size: 30rpx;
		color: #292929;
		padding: 0 24rpx;
	}

	.taskscnt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 36rpx;
		padding: 0 24rpx;
	}

	.textbox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 30rpx;
	}

	.text1 {
		font-size: 30rpx;
		color: #292929;
		margin-bottom: 8rpx;
	}

	.text2 {
		font-size: 26rpx;
		color: #767676;
	}

	.btn {
		margin: 0;
		width: 136rpx;
		height: 46rpx;
		background-color: white;
		text-align: center;
		line-height: 46rpx;
		border-radius: 28rpx;
		font-size: 26rpx;
		padding: 0;
	}

	.go {
		border: 1px solid #F54642;
		color: #F54642;
	}

	.over {
		border: 1px solid #B1B1B1;
		color: #B1B1B1;
	}

	.border16 {
		height: 16rpx;
		background-color: #f4f4f4;
	}

	.box:nth-last-child(1) .border16 {
		height: 0;
	}
</style>
